<template>
  <view class="container">
    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">正在加载商品详情...</text>
    </view>
    <!-- 商品图片轮播 -->
    <uni-swiper-dot
      v-if="productImages.length > 0"
      :info="productImages"
      :current="current"
      field="content"
      :mode="mode"
      class="swiper-dot"
    >
      <swiper class="swiper" circular :indicator-dots="false" @change="change">
        <swiper-item v-for="(item, index) in productImages" :key="index">
          <image :src="item.image" class="swiper-image" mode="aspectFill" @click="onPreviewImages(index)" />
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 商品基本信息 -->
    <view class="product-info" v-if="productDetail">
      <view class="price-section">
        <text class="price">¥{{ productDetail.sellingPrice / 100 }}</text>
        <!-- <view class="share-button-wrapper" @click="showSharePopup"> -->
        <button class="share-button-wrapper" open-type="share" @click="shareToFriend">
          <uni-icons type="redo" size="20" color="#ff6600"></uni-icons>
          <text class="share-label">分享</text>
        </button>
        <!-- </view> -->
      </view>
      <view class="title">{{ productDetail.productName }}</view>
    </view>

    <!-- 分享弹窗 -->
    <view class="share-mask" v-if="shareVisible" @click="hideSharePopup">
      <view class="share-popup" @click.stop>
        <view class="share-title">商品信息复制成功,分享海报贴贴即可</view>
        <view class="share-options">
          <button class="share-option" open-type="share" @click="shareToFriend">
            <view class="share-icon wechat-icon">
              <uni-icons type="weixin" size="32" color="#ffffff"></uni-icons>
            </view>
            <text class="share-option-text">微信</text>
          </button>
          <button class="share-option" @click="shareToMoments">
            <view class="share-icon moments-icon">
              <uni-icons type="loop" size="32" color="#ffffff"></uni-icons>
            </view>
            <text class="share-option-text">朋友圈</text>
          </button>
          <!-- <button class="share-option" @click="saveImage">
            <view class="share-icon save-icon">
              <uni-icons type="download" size="32" color="#ffffff"></uni-icons>
            </view>
            <text class="share-option-text">保存图片</text>
          </button> -->
        </view>
        <view class="share-cancel" @click="hideSharePopup">取消</view>
      </view>
    </view>

    <!-- 商品规格选择 -->
    <view class="spec-container" v-if="productDetail && productDetail.attrValueList?.length > 0">
      <view class="spec-header">
        <text class="spec-label">已选</text>
        <text class="spec-selected">{{ getSelectedAttrText() }}</text>
      </view>
      <view class="spec-content">
        <view class="spec-options">
          <view
            v-for="(attr, index) in productDetail.attrValueList"
            :key="index"
            class="spec-option"
            :class="{ 'spec-selected': attr.selectFlag }"
            @click="selectAttr(attr)"
          >
            <text class="spec-text">{{ attr.attrValue }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <uni-section title="商品详情" type="line" v-if="productDetail">
      <view class="detail-content">
        <rich-text
          v-if="productDetail.detailContent"
          :nodes="processedDetailContent"
          class="rich-text-content"
        ></rich-text>
        <view v-else class="no-detail">
          <text class="no-detail-text">暂无详细描述</text>
        </view>
      </view>
    </uni-section>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="buy-buttons">
        <button class="add-cart" @click="addToCart">加入购物车</button>
        <button class="buy-now" @click="buyNow">立即下单</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import request from '@/utils/request';

// 页面状态
const loading = ref(true);
const productId = ref<any>('');
const current = ref<any>(0);
const mode = ref<any>('dot');

// 商品数据
const productDetail = ref<any>({});
const productImages = ref<any>([]);

const isFavorite = ref(false);

// 分享弹窗状态
const shareVisible = ref(false);

// 处理富文本内容，限制图片尺寸
const processedDetailContent = computed(() => {
  if (!productDetail.value?.detailContent) return '';

  let content = productDetail.value.detailContent;

  // 如果是字符串格式的HTML，需要处理图片标签
  if (typeof content === 'string') {
    // 使用正则表达式为所有img标签添加样式
    content = content.replace(
      /<img([^>]*)>/gi,
      '<img$1 style="max-width: 100% !important; height: auto !important; display: block;">'
    );

    // 移除可能存在的固定宽高属性
    content = content.replace(/width\s*=\s*["'][^"']*["']/gi, '');
    content = content.replace(/height\s*=\s*["'][^"']*["']/gi, '');

    return content;
  }

  // 如果是节点数组格式，递归处理
  if (Array.isArray(content)) {
    return processNodes(content);
  }

  return content;
});

// 递归处理节点数组
const processNodes = (nodes: any[]): any[] => {
  return nodes.map((node) => {
    if (typeof node === 'string') {
      return node;
    }

    if (node.name === 'img') {
      // 处理img节点
      return {
        ...node,
        attrs: {
          ...node.attrs,
          style: 'max-width: 100%; height: auto; display: block;',
        },
      };
    }

    if (node.children && Array.isArray(node.children)) {
      return {
        ...node,
        children: processNodes(node.children),
      };
    }

    return node;
  });
};

// 获取选中的属性文本
const getSelectedAttrText = () => {
  if (!productDetail.value?.attrValueList) return '请选择规格';

  const selected = productDetail.value.attrValueList.find((attr: any) => attr.selectFlag);
  return selected ? selected.attrValue : '请选择规格';
};

// 获取商品详情
const getProductDetail = async (id: string) => {
  try {
    loading.value = true;

    const response = await request<any>({
      url: `/product/${id}`,
      method: 'GET',
    });

    if (response.code === 200) {
      productDetail.value = response.data;

      // 构建轮播图数据 - 主图放在第一个，然后合并轮播图
      const images = [];

      // 1. 首先添加主图（如果存在）
      if (response.data.mainImageUrl) {
        images.push({
          image: response.data.mainImageUrl,
          content: '商品主图',
        });
      }

      // 2. 然后添加轮播图（如果存在且不与主图重复）
      if (response.data.slideImageUrls && response.data.slideImageUrls.length > 0) {
        response.data.slideImageUrls.forEach((url: any, index: any) => {
          // 避免与主图重复
          if (url !== response.data.mainImageUrl) {
            images.push({
              image: url,
              content: `轮播图${index + 1}`,
            });
          }
        });
      }

      // 3. 如果都没有图片，使用默认图片
      if (images.length === 0) {
        images.push({
          image: '/static/default-product.png',
          content: '默认图片',
        });
      }

      productImages.value = images;

      console.log('商品详情加载完成:', {
        productName: response.data.productName,
        price: response.data.sellingPrice,
        imageCount: images.length,
        attrCount: response.data.attrValueList?.length || 0,
        hasDetail: !!response.data.detailContent,
      });
    } else {
      uni.showToast({
        title: response.msg || '获取商品详情失败',
        icon: 'none',
      });
    }
  } catch (error) {
    console.error('获取商品详情失败:', error);
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none',
    });
  } finally {
    loading.value = false;
  }
};

// 轮播图切换
const change = (e: any) => {
  current.value = e.detail.current;
};

// 预览图片 - 微信小程序兼容版本
const onPreviewImages = (index: number) => {
  // 提取所有图片的 URL
  const urls = productImages.value.map((item: any) => item.image);

  // 使用 uni.previewImage 预览图片 - 简化配置以兼容微信小程序
  uni.previewImage({
    current: urls[index], // 当前显示图片的链接（微信小程序要求传URL而不是索引）
    urls: urls, // 需要预览的图片链接列表
  });

  console.log('预览图片:', {
    currentIndex: index,
    totalImages: urls.length,
    currentUrl: urls[index],
  });
};

// 选择属性 - 单选模式，选中后重新调用接口
const selectAttr = async (attr: any) => {
  if (!productDetail.value) return;

  // 如果点击的是已选中的属性，不做任何操作
  if (attr.selectFlag) {
    console.log('属性已选中，无需重复选择');
    return;
  }

  // 重置所有属性的选择状态
  productDetail.value.attrValueList.forEach((item: any) => {
    item.selectFlag = false;
  });

  // 设置当前选择的属性
  attr.selectFlag = true;

  console.log('属性选择变更:', {
    selectedAttrId: attr.id,
    selectedAttrValue: attr.attrValue,
    productId: productDetail.value.id,
  });

  // 显示加载提示
  uni.showLoading({
    title: '切换规格中...',
  });

  try {
    // 根据选中的属性ID重新调用详情接口
    await getProductDetailByAttr(attr.id);
  } catch (error) {
    console.error('切换属性失败:', error);
    uni.showToast({
      title: '切换规格失败',
      icon: 'none',
    });
  } finally {
    uni.hideLoading();
  }
};

// 根据属性ID获取商品详情
const getProductDetailByAttr = async (attrId: string) => {
  try {
    const response = await request<any>({
      url: `/product/${attrId}`,
      method: 'GET',
    });

    if (response.code === 200) {
      // 更新商品详情数据
      productDetail.value = response.data;

      // 重新构建轮播图数据
      const images = [];

      // 1. 首先添加主图（如果存在）
      if (response.data.mainImageUrl) {
        images.push({
          image: response.data.mainImageUrl,
          content: '商品主图',
        });
      }

      // 2. 然后添加轮播图（如果存在且不与主图重复）
      if (response.data.slideImageUrls && response.data.slideImageUrls.length > 0) {
        response.data.slideImageUrls.forEach((url: any, index: any) => {
          // 避免与主图重复
          if (url !== response.data.mainImageUrl) {
            images.push({
              image: url,
              content: `轮播图${index + 1}`,
            });
          }
        });
      }

      // 3. 如果都没有图片，使用默认图片
      if (images.length === 0) {
        images.push({
          image: '/static/default-product.png',
          content: '默认图片',
        });
      }

      productImages.value = images;

      // 重置轮播图到第一张
      current.value = 0;

      console.log('属性切换完成，商品详情已更新:', {
        newProductName: response.data.productName,
        newPrice: response.data.sellingPrice,
        newImageCount: images.length,
        newAttrCount: response.data.attrValueList?.length || 0,
      });

      uni.showToast({
        title: '规格切换成功',
        icon: 'success',
        duration: 1000,
      });
    } else {
      throw new Error(response.msg || '获取商品详情失败');
    }
  } catch (error) {
    console.error('根据属性ID获取商品详情失败:', error);
    throw error;
  }
};

// 加入购物车
const addToCart = async () => {
  if (!productDetail.value) {
    uni.showToast({
      title: '商品信息加载中',
      icon: 'none',
    });
    return;
  }

  console.log('准备加入购物车:', {
    productId: productDetail.value.id,
    productName: productDetail.value.productName,
  });

  try {
    uni.showLoading({
      title: '加入中...',
    });

    const response = await request({
      url: '/cart',
      method: 'POST',
      data: {
        productId: productDetail.value.id,
        quantity: 1,
      },
    });

    uni.hideLoading();

    if (response.code === 200) {
      uni.showToast({
        title: '加入购物车成功',
        icon: 'success',
        duration: 2000,
      });
    } else {
      uni.showToast({
        title: response.msg || '加入购物车失败',
        icon: 'none',
      });
    }
  } catch (error) {
    uni.hideLoading();
    console.error('加入购物车失败:', error);
    uni.showToast({
      title: '加入购物车失败，请重试',
      icon: 'none',
    });
  }
};

// 立即购买
const buyNow = async () => {
  if (!productDetail.value) {
    uni.showToast({
      title: '商品信息加载中',
      icon: 'none',
    });
    return;
  }

  // 检查是否有必选属性未选择
  const selectedAttrs = productDetail.value.attrValueList.filter((attr: any) => attr.selectFlag);

  console.log('准备下单:', productDetail.value, selectedAttrs);

  try {
    uni.showLoading({
      title: '下单中...',
    });

    const response = await request({
      url: '/order',
      method: 'POST',
      data: {
        orderItemList: [
          {
            productId: productDetail.value.id,
            productNum: 1, // 商品详情页立即下单，数量固定为1
          },
        ],
      },
    });

    console.log('创建订单响应:', response);

    uni.hideLoading();

    if (response.code === 200) {
      uni.showToast({
        title: '下单成功',
        icon: 'success',
      });

      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/user/orders?fromOrderSuccess=true',
        });
      }, 1500);
    } else {
      uni.showToast({
        title: response.msg || '下单失败',
        icon: 'none',
      });
    }
  } catch (error) {
    uni.hideLoading();
    console.error('下单失败:', error);
    uni.showToast({
      title: '下单失败，请重试',
      icon: 'none',
    });
  }
};

// 隐藏分享弹窗
const hideSharePopup = () => {
  shareVisible.value = false;
};

// 分享给朋友
const shareToFriend = () => {
  console.log('准备分享给朋友');
  hideSharePopup();
};

// 分享到朋友圈
const shareToMoments = () => {
  hideSharePopup();

  // #ifdef MP-WEIXIN
  // 微信小程序：引导用户点击右上角分享到朋友圈
  // 注意：微信小程序不支持直接触发分享到朋友圈，只能通过右上角菜单
  uni.showToast({
    title: '请点击右上角"..."分享',
    icon: 'none',
    duration: 2000,
  });

  // 确保已开启分享到朋友圈功能
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
  });
  // #endif

  // #ifdef APP-PLUS
  // App端：使用系统分享
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneTimeline',
    type: 0,
    title: productDetail.value?.productName || '商品分享',
    imageUrl: productDetail.value?.mainImageUrl || '',
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success',
      });
    },
    fail: (err) => {
      console.error('分享失败:', err);
      uni.showToast({
        title: '分享失败',
        icon: 'none',
      });
    },
  });
  // #endif

  // #ifndef MP-WEIXIN || APP-PLUS
  uni.showToast({
    title: '当前平台不支持分享',
    icon: 'none',
  });
  // #endif
};

// 配置分享给朋友
onShareAppMessage(() => {
  return {
    title: productDetail.value?.productName || '商品分享',
    path: `/pages/product/detail?id=${productId.value}`,
    imageUrl: productDetail.value?.mainImageUrl || '',
  };
});

// 配置分享到朋友圈
onShareTimeline(() => {
  return {
    title: productDetail.value?.productName || '商品分享',
    query: `id=${productId.value}`,
    imageUrl: productDetail.value?.mainImageUrl || '',
  };
});

// 页面加载时获取参数
onLoad((options) => {
  if (options?.id) {
    productId.value = options.id;
    console.log('商品ID:', productId.value);
    getProductDetail(productId.value);
  } else {
    uni.showToast({
      title: '商品ID不存在',
      icon: 'none',
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style scoped>
.container {
  padding-bottom: 120rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    sans-serif;
}

/* 轮播图容器优化 */
.swiper-dot {
  background: #fff;
}

.swiper {
  height: 600rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.swiper-image:active {
  transform: scale(0.98);
}

/* 商品信息卡片优化 */
.product-info {
  background: #fff;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.price-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.price {
  font-size: 48rpx;
  font-weight: 600;
  color: #ff6600;
  margin-right: 16rpx;
}

.share-button-wrapper {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  background: #fff5f0;
  border: 1rpx solid #ff6600;
  border-radius: 20rpx;
  transition: all 0.3s ease;
  margin: 0;
  height: 60rpx;
}

.share-button-wrapper:active {
  transform: scale(0.95);
  background: #ffe8dc;
}

.share-label {
  font-size: 24rpx;
  color: #ff6600;
  font-weight: 500;
}

/* 分享弹窗样式 */
.share-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 9999;
}

.share-popup {
  width: 100%;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx 24rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.share-title {
  font-size: 28rpx;
  color: #333;
  text-align: center;
  margin-bottom: 32rpx;
  font-weight: 500;
}

.share-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 32rpx;
  padding: 0 48rpx;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  background: transparent;
  border: none;
  padding: 0;
  transition: all 0.3s ease;
  flex: 1;
  max-width: 120rpx;
}

.share-option::after {
  border: none;
}

.share-option:active {
  transform: scale(0.9);
}

.share-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.wechat-icon {
  background: linear-gradient(135deg, #07c160 0%, #00b34f 100%);
}

.moments-icon {
  background: linear-gradient(135deg, #09bb07 0%, #00a000 100%);
}

.save-icon {
  background: linear-gradient(135deg, #1989fa 0%, #0066cc 100%);
}

.share-option-text {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

.share-cancel {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #f8f8f8;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-top: 16rpx;
  transition: all 0.3s ease;
}

.share-cancel:active {
  background: #e8e8e8;
}

.original-price {
  font-size: 28rpx;
  color: #999;
  text-decoration: line-through;
  font-weight: 400;
}

.title {
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
  line-height: 1.4;
}

.description {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24rpx;
  font-weight: 400;
  position: relative;
  z-index: 1;
}

.sales-info {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #888;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

/* 规格选择区域优化 */
.spec-container {
  background: #fff;
  padding: 24rpx;
  margin-bottom: 16rpx;
}

.spec-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.spec-label {
  font-size: 26rpx;
  color: #666;
  margin-right: 16rpx;
}

.spec-selected {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

.spec-content {
  margin-top: 8rpx;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.spec-option {
  padding: 12rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  background: #fff;
  transition: all 0.3s ease;
}

.spec-option.spec-selected {
  border-color: #ff6600;
  background: #fff7e6;
}

.spec-text {
  font-size: 24rpx;
  color: #333;
}

.spec-option.spec-selected .spec-text {
  color: #ff6600;
}

/* 商品详情内容优化 */
.detail-content {
  padding: 24rpx;
}

/* 富文本内容样式优化 */
.rich-text-content {
  line-height: 1.7;
  word-wrap: break-word;
  font-weight: 400;
}

.detail-content :deep(img) {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  /* margin: 32rpx 0; */
  margin: 0 !important;
  /* border-radius: 16rpx; */
  /* box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); */
  transition: all 0.3s ease;
}
.detail-content img {
  margin: 0 !important;
}

.detail-content :deep(img:hover) {
  transform: scale(1.02);
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
}

.detail-content :deep(p) {
  margin: 16rpx 0;
  line-height: 1.5;
  color: #666;
  font-size: 26rpx;
  font-weight: 400;
}

.detail-content :deep(div) {
  margin: 16rpx 0;
}

.detail-content :deep(h1),
.detail-content :deep(h2),
.detail-content :deep(h3),
.detail-content :deep(h4),
.detail-content :deep(h5),
.detail-content :deep(h6) {
  margin: 40rpx 0 24rpx 0;
  color: #1a1a1a;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.detail-content :deep(h1) {
  font-size: 40rpx;
}
.detail-content :deep(h2) {
  font-size: 36rpx;
}
.detail-content :deep(h3) {
  font-size: 32rpx;
}

.detail-content :deep(ul),
.detail-content :deep(ol) {
  margin: 24rpx 0;
  padding-left: 48rpx;
}

.detail-content :deep(li) {
  margin: 12rpx 0;
  line-height: 1.6;
  font-size: 30rpx;
  color: #333;
}

/* 底部操作栏优化 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.action-buttons {
  display: flex;
  gap: 48rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-item:active {
  transform: scale(0.95);
}

.buy-buttons {
  display: flex;
  gap: 24rpx;
  width: 100%;
}

.buy-now,
.add-cart {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
}

.buy-now {
  background: linear-gradient(135deg, #ff6600 0%, #ff8800 100%);
  color: #fff;
}

.buy-now:active {
  opacity: 0.9;
}

.add-cart {
  background: #fff;
  color: #ff6600;
  border: 2rpx solid #ff6600;
}

.add-cart:active {
  transform: translateY(2rpx) scale(0.98);
  background: #fff5f0;
}

/* 加载状态样式优化 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid rgba(255, 107, 53, 0.1);
  border-top: 6rpx solid #ff6b35;
  border-radius: 50%;
  animation: spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  margin-bottom: 32rpx;
}

.loading-text {
  font-size: 32rpx;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.02em;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 无详情内容样式优化 */
.no-detail {
  text-align: center;
  padding: 80rpx 0;
}

.no-detail-text {
  font-size: 32rpx;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 属性选择标签优化 */
.spec-options :deep(.uni-tag) {
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16rpx;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.spec-options :deep(.uni-tag:active) {
  transform: scale(0.95);
}

.spec-options :deep(.uni-tag[type='primary']) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
  transform: scale(1.05);
}

.spec-options :deep(.uni-tag[type='default']) {
  background: rgba(248, 249, 250, 0.8);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}

/* 轮播图指示器优化 */
:deep(.uni-swiper-dot-box) {
  bottom: 24rpx;
}

:deep(.uni-swiper__dot) {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12rpx;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.uni-swiper__dot-active) {
  background: #fff;
  transform: scale(1.3);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
}

/* Section 标题优化 */
:deep(.uni-section__head) {
  color: #333;
  font-weight: 500;
  font-size: 28rpx;
}

:deep(.uni-section) {
  margin-bottom: 16rpx;
  background: #fff;
}
</style>
